#io_content{
	background: url(../img/bak.png);
	position: absolute;
	top: 50px;
	left: 70px;
	color: #fff;
	z-index: 0;
}

#io_menu{
	width: 62px;
	height: 100%;
	background: #151619;
	position: absolute;
}

#io_menu li{
	text-align: center;
	font-size: 14px;
	padding-top: 20px;
	padding-bottom: 20px;
}
#io_menu li:nth-of-type(1){
	margin-top: 30px;
}
.active_li .active_p{
	color: #00C5AC;
}
#io_box{
	height: 100%;
	position: absolute;
	left: 62px;
	top: 0;
}


/*笛卡尔点*/
#io_locations,
#io_joints,
#io_longs,
#io_doubles,
#io_strings,
#io_visions{
	width: 98%;
	height: 98%;
	background: rgba(0,0,0,0.5);
	position: absolute;
	left: 1%;
	top: 1%;
}
.locationsNav{
	height: 50px;
	width: 100%;
	border-bottom: 1px solid gray;
}
.addLocations,
.removeLocations{
	width: 12%;
	height: 30px;
	text-align: center;
	line-height: 30px;
	font-size: 16px;
	background: #34495e;
	border-radius: 15px;
	position: absolute;
	top: 10px;
}
.addLocations{
	right: 14%;
}
.removeLocations{
	right: 1%;
}
.locationsTitle_div{
	width: 100%;
	height: 50px;
	border-bottom: 1px solid gray;
	position: absolute;
}

.locationsTitle_div span{
	text-align: center;
	display: inline-block;
	width: 10%;
	height: 50px;
	line-height: 50px;
	position: absolute;
	top: 0;
}
.locationsTitle_div span:nth-of-type(1){
	left: 0;
}
.locationsTitle_div span:nth-of-type(2){
	left: 10%;
}
.locationsTitle_div span:nth-of-type(3){
	left: 20%;
}
.locationsTitle_div span:nth-of-type(4){
	left: 30%;
}
.locationsTitle_div span:nth-of-type(5){
	left: 40%;
}
.locationsTitle_div span:nth-of-type(6){
	left: 50%;
}
.locationsTitle_div span:nth-of-type(7){
	left: 60%;
}
.locationsTitle_div span:nth-of-type(8){
	left: 70%;
}
.locationsTitle_div span:nth-of-type(9){
	left: 80%;
}
#locationsChecked,.locationsCheckeds{
	width: 20px;
	height: 20px;
	position: absolute;
	top: 16px;
	left: 35%;
}
#locationsContent_ul{
	width: 100%;
	height: 80%;
	position: absolute;
	top: 102px;
	overflow-y:scroll;
}
.locationsContent_li{
	width: 100%;
	height: 50px;
	/*border-bottom: 1px solid gray;*/
	position: relative;
}
.locationsContent_li span{
	display: inline-block;
	text-align: center;
	width: 10%;
	height: 50px;
	line-height: 50px;
	position: absolute;
	top: 0;
}
.locationsContent_span0{
	left: 0;
}
.locationsContent_span1{
	left: 10%;
}
.locationsContent_span2{
	left: 20%;
}
.locationsContent_span3{
	left: 30%;
}
.locationsContent_span4{
	left: 40%;
}
.locationsContent_span5{
	left: 50%;
}
.locationsContent_span6{
	left: 60%;
}
.locationsContent_span7{
	left: 70%;
	background: url(../img/mode_white.png) no-repeat;
	background-position: 50%;
}
.locationsContent_span8{
	left: 80%;
}
#addLocationsMask,#modifyLocationsMask{
	display: none;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.7);
	position: absolute;
	top: 0;
	left: 0;
}
#addLocationsModal,#modifyLocationsModal{
	position: absolute;
	top: 60px;
	left: 20%;
	width: 310px;
	height: 380px;
	background: rgba(0,0,0,0.8);
}
#addLocationsModal h4,#modifyLocationsModal h4{
	text-align: center;
}
#addLocationsModal p,#modifyLocationsModal p{
	height: 40px;
	line-height: 40px;
}
#addLocationsModal span,#modifyLocationsModal span{
	display: inline-block;
	width: 70px;
	text-align: right;
	margin-right: 10px;
}
#closeLocationsModal,#closeLocationsModify{
	display: inline-block;
	text-align: center;
	position: absolute;
	bottom: 10px;
	right: 80px;
	text-align: center !important;
	color: #00C5AC;
}
#srueLocationsModal,#srueLocationsModify{
	display: inline-block;
	text-align: center;
	position: absolute;
	bottom: 10px;
	right: 0px;
	text-align: center !important;
	color: #00C5AC;
}



/*关节点*/
#io_joints{
	display: none;
}
.jointsNav{
	height: 50px;
	width: 100%;
	border-bottom: 1px solid gray;
}
.addJoints,
.removeJoints{
	width: 12%;
	height: 30px;
	text-align: center;
	line-height: 30px;
	font-size: 16px;
	background: #34495e;
	border-radius: 15px;
	position: absolute;
	top: 10px;
}
.addJoints{
	right: 14%;
}
.removeJoints{
	right: 1%;
}
.jointsTitle_div{
	width: 100%;
	height: 50px;
	border-bottom: 1px solid gray;
	position: absolute;
}
.jointsTitle_div span{
	text-align: center;
	display: inline-block;
	width: 10%;
	height: 50px;
	line-height: 50px;
	position: absolute;
	top: 0;
}
.jointsTitle_div span:nth-of-type(1){
	left: 0;
}
.jointsTitle_div span:nth-of-type(2){
	left: 10%;
}
.jointsTitle_div span:nth-of-type(3){
	left: 20%;
}
.jointsTitle_div span:nth-of-type(4){
	left: 30%;
}
.jointsTitle_div span:nth-of-type(5){
	left: 40%;
}
.jointsTitle_div span:nth-of-type(6){
	left: 50%;
}
.jointsTitle_div span:nth-of-type(7){
	left: 60%;
}
.jointsTitle_div span:nth-of-type(8){
	left: 70%;
}
.jointsTitle_div span:nth-of-type(9){
	left: 80%;
}
.jointsTitle_div span:nth-of-type(10){
	left: 90%;
}
#jointsChecked,.jointsCheckeds{
	width: 20px;
	height: 20px;
	position: absolute;
	top: 16px;
	left: 35%;
}
#jointsContent_ul{
	width: 100%;
	height: 80%;
	position: absolute;
	top: 102px;
	overflow-y:scroll;
}
.jointsContent_li{
	width: 100%;
	height: 50px;
	/*border-bottom: 1px solid gray;*/
	position: relative;
}
.jointsContent_li span{
	display: inline-block;
	text-align: center;
	width: 10%;
	height: 50px;
	line-height: 50px;
	position: absolute;
	top: 0;
}
.jointsContent_span0{
	left: 0;
}
.jointsContent_span1{
	left: 10%;
}
.jointsContent_span2{
	left: 20%;
}
.jointsContent_span3{
	left: 30%;
}
.jointsContent_span4{
	left: 40%;
}
.jointsContent_span5{
	left: 50%;
}
.jointsContent_span6{
	left: 60%;
}
.jointsContent_span7{
	left: 70%;
}
.jointsContent_span8{
	left: 80%;
	background: url(../img/mode_white.png) no-repeat;
	background-position: 50%;
}
.jointsContent_span9{
	left: 90%;
}
#addJointsMask,#modifyJointsMask{
	display: none;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.7);
	position: absolute;
	top: 0;
	left: 0;
}
#addJointsModal,#modifyJointsModal{
	position: absolute;
	top: 60px;
	left: 20%;
	width: 310px;
	height: 380px;
	background: rgba(0,0,0,0.8);
}
#addJointsModal h4,#modifyJointsModal h4{
	text-align: center;
}
#addJointsModal p,#modifyJointsModal p{
	height: 40px;
	line-height: 40px;
}
#addJointsModal span,#modifyJointsModal span{
	display: inline-block;
	width: 70px;
	text-align: right;
	margin-right: 10px;
}
#closeJointsModal,#closeJointsModify{
	display: inline-block;
	text-align: center;
	position: absolute;
	bottom: 10px;
	right: 80px;
	text-align: center !important;
	color: #00C5AC;
}
#srueJointsModal,#srueJointsModify{
	display: inline-block;
	text-align: center;
	position: absolute;
	bottom: 10px;
	right: 0px;
	text-align: center !important;
	color: #00C5AC;
}





/*整数*/
#io_longs{
	display: none;
}
.longsNav{
	height: 50px;
	width: 100%;
	border-bottom: 1px solid gray;
}
.addLongs,
.removeLongs{
	width: 12%;
	height: 30px;
	text-align: center;
	line-height: 30px;
	font-size: 16px;
	background: #34495e;
	border-radius: 15px;
	position: absolute;
	top: 10px;
}
.addLongs{
	right: 14%;
}
.removeLongs{
	right: 1%;
}
.longsTitle_div{
	width: 100%;
	height: 50px;
	border-bottom: 1px solid gray;
	position: absolute;
}
.longsTitle_div span{
	text-align: center;
	display: inline-block;
	width: 10%;
	height: 50px;
	line-height: 50px;
	position: absolute;
	top: 0;
}
.longsTitle_div span:nth-of-type(1){
	left: 0;
}
.longsTitle_div span:nth-of-type(2){
	left: 10%;
}
.longsTitle_div span:nth-of-type(3){
	left: 20%;
}
.longsTitle_div span:nth-of-type(4){
	left: 30%;
}
#longsChecked,.longsCheckeds{
	width: 20px;
	height: 20px;
	position: absolute;
	top: 16px;
	left: 35%;
}
#longsContent_ul{
	width: 100%;
	height: 80%;
	position: absolute;
	top: 102px;
	overflow-y:scroll;
}
.longsContent_li{
	width: 100%;
	height: 50px;
	/*border-bottom: 1px solid gray;*/
	position: relative;
}
.longsContent_li span{
	display: inline-block;
	text-align: center;
	width: 10%;
	height: 50px;
	line-height: 50px;
	position: absolute;
	top: 0;
}
.longsContent_span0{
	left: 0;
}
.longsContent_span1{
	left: 10%;
}
.longsContent_span2{
	left: 20%;
	background: url(../img/mode_white.png) no-repeat;
	background-position: 50%;
}
.longsContent_span3{
	left: 30%;
}

#addLongsMask,#modifyLongsMask{
	display: none;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.7);
	position: absolute;
	top: 0;
	left: 0;
}
#addLongsModal,#modifyLongsModal{
	position: absolute;
	top: 60px;
	left: 20%;
	width: 310px;
	height: 380px;
	background: rgba(0,0,0,0.8);
}
#addLongsModal h4,#modifyLongsModal h4{
	text-align: center;
}
#addLongsModal p,#modifyLongsModal p{
	height: 40px;
	line-height: 40px;
}
#addLongsModal span,#modifyLongsModal span{
	display: inline-block;
	width: 70px;
	text-align: right;
	margin-right: 10px;
}
#closeLongsModal,#closeLongsModify{
	display: inline-block;
	text-align: center;
	position: absolute;
	bottom: 10px;
	right: 80px;
	text-align: center !important;
	color: #00C5AC;
}
#srueLongsModal,#srueLongsModify{
	display: inline-block;
	text-align: center;
	position: absolute;
	bottom: 10px;
	right: 0px;
	text-align: center !important;
	color: #00C5AC;
}


/*小数*/
#io_doubles{
	display: none;
}
.doublesNav{
	height: 50px;
	width: 100%;
	border-bottom: 1px solid gray;
}
.addDoubles,
.removeDoubles{
	width: 12%;
	height: 30px;
	text-align: center;
	line-height: 30px;
	font-size: 16px;
	background: #34495e;
	border-radius: 15px;
	position: absolute;
	top: 10px;
}
.addDoubles{
	right: 14%;
}
.removeDoubles{
	right: 1%;
}
.doublesTitle_div{
	width: 100%;
	height: 50px;
	border-bottom: 1px solid gray;
	position: absolute;
}
.doublesTitle_div span{
	text-align: center;
	display: inline-block;
	width: 10%;
	height: 50px;
	line-height: 50px;
	position: absolute;
	top: 0;
}
.doublesTitle_div span:nth-of-type(1){
	left: 0;
}
.doublesTitle_div span:nth-of-type(2){
	left: 10%;
}
.doublesTitle_div span:nth-of-type(3){
	left: 20%;
}
.doublesTitle_div span:nth-of-type(4){
	left: 30%;
}
#doublesChecked,.doublesCheckeds{
	width: 20px;
	height: 20px;
	position: absolute;
	top: 16px;
	left: 35%;
}
#doublesContent_ul{
	width: 100%;
	height: 80%;
	position: absolute;
	top: 102px;
	overflow-y:scroll;
}
.doublesContent_li{
	width: 100%;
	height: 50px;
	/*border-bottom: 1px solid gray;*/
	position: relative;
}
.doublesContent_li span{
	display: inline-block;
	text-align: center;
	width: 10%;
	height: 50px;
	line-height: 50px;
	position: absolute;
	top: 0;
}
.doublesContent_span0{
	left: 0;
}
.doublesContent_span1{
	left: 10%;
}
.doublesContent_span2{
	left: 20%;
	background: url(../img/mode_white.png) no-repeat;
	background-position: 50%;
}
.doublesContent_span3{
	left: 30%;
}

#addDoublesMask,#modifyDoublesMask{
	display: none;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.7);
	position: absolute;
	top: 0;
	left: 0;
}
#addDoublesModal,#modifyDoublesModal{
	position: absolute;
	top: 60px;
	left: 20%;
	width: 310px;
	height: 380px;
	background: rgba(0,0,0,0.8);
}
#addDoublesModal h4,#modifyDoublesModal h4{
	text-align: center;
}
#addDoublesModal p,#modifyDoublesModal p{
	height: 40px;
	line-height: 40px;
}
#addDoublesModal span,#modifyDoublesModal span{
	display: inline-block;
	width: 70px;
	text-align: right;
	margin-right: 10px;
}
#closeDoublesModal,#closeDoublesModify{
	display: inline-block;
	text-align: center;
	position: absolute;
	bottom: 10px;
	right: 80px;
	text-align: center !important;
	color: #00C5AC;
}
#srueDoublesModal,#srueDoublesModify{
	display: inline-block;
	text-align: center;
	position: absolute;
	bottom: 10px;
	right: 0px;
	text-align: center !important;
	color: #00C5AC;
}

/*字符串*/
#io_strings{
	display: none;
}
.stringsNav{
	height: 50px;
	width: 100%;
	border-bottom: 1px solid gray;
}
.addStrings,
.removeStrings{
	width: 12%;
	height: 30px;
	text-align: center;
	line-height: 30px;
	font-size: 16px;
	background: #34495e;
	border-radius: 15px;
	position: absolute;
	top: 10px;
}
.addStrings{
	right: 14%;
}
.removeStrings{
	right: 1%;
}
.stringsTitle_div{
	width: 100%;
	height: 50px;
	border-bottom: 1px solid gray;
	position: absolute;
}
.stringsTitle_div span{
	text-align: center;
	display: inline-block;
	width: 10%;
	height: 50px;
	line-height: 50px;
	position: absolute;
	top: 0;
}
.stringsTitle_div span:nth-of-type(1){
	left: 0;
}
.stringsTitle_div span:nth-of-type(2){
	left: 10%;
}
.stringsTitle_div span:nth-of-type(3){
	left: 20%;
}
.stringsTitle_div span:nth-of-type(4){
	left: 30%;
}
#stringsChecked,.stringsCheckeds{
	width: 20px;
	height: 20px;
	position: absolute;
	top: 16px;
	left: 35%;
}
#stringsContent_ul{
	width: 100%;
	height: 80%;
	position: absolute;
	top: 102px;
	overflow-y:scroll;
}
.stringsContent_li{
	width: 100%;
	height: 50px;
	/*border-bottom: 1px solid gray;*/
	position: relative;
}
.stringsContent_li span{
	display: inline-block;
	text-align: center;
	width: 10%;
	height: 50px;
	line-height: 50px;
	position: absolute;
	top: 0;
}
.stringsContent_span0{
	left: 0;
}
.stringsContent_span1{
	left: 10%;
}
.stringsContent_span2{
	left: 20%;
	background: url(../img/mode_white.png) no-repeat;
	background-position: 50%;
}
.stringsContent_span3{
	left: 30%;
}

#addStringsMask,#modifyStringsMask{
	display: none;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.7);
	position: absolute;
	top: 0;
	left: 0;
}
#addStringsModal,#modifyStringsModal{
	position: absolute;
	top: 60px;
	left: 20%;
	width: 310px;
	height: 380px;
	background: rgba(0,0,0,0.8);
}
#addStringsModal h4,#modifyStringsModal h4{
	text-align: center;
}
#addStringsModal p,#modifyStringsModal p{
	height: 40px;
	line-height: 40px;
}
#addStringsModal span,#modifyStringsModal span{
	display: inline-block;
	width: 70px;
	text-align: right;
	margin-right: 10px;
}
#closeStringsModal,#closeStringsModify{
	display: inline-block;
	text-align: center;
	position: absolute;
	bottom: 10px;
	right: 80px;
	text-align: center !important;
	color: #00C5AC;
}
#srueStringsModal,#srueStringsModify{
	display: inline-block;
	text-align: center;
	position: absolute;
	bottom: 10px;
	right: 0px;
	text-align: center !important;
	color: #00C5AC;
}

/*视觉*/
#io_visions{
	display: none;
}
